<template>
  <div class="search-container">
    <!-- 顶部搜索栏 -->
    <!-- Tips: 在 van-search 外层增加 form 标签，
    且 action 不为空，
    即可在 iOS 输入法中显示搜索按钮。 -->
    <form class="search-form" action="/">
        <van-search
            v-model="searchText"
            show-action
            shape="round"
            placeholder="请输入搜索关键词"
            background="#3296fa"
            @search="onSearch"
            @cancel="onCancel"
            @focus="isResultShow = false"
        />
    </form>
    <!-- 搜索结果 -->
    <search-result
     v-if="isResultShow"
     :search-text="searchText"/>
    
  
    <!-- 联想建议 -->
    <search-suggestion
     v-else-if="searchText"
     :search-text="searchText"
     @search="onSearch"/>

    <!-- 搜索历史记录 -->
    <search-histroy v-else/>

   
  </div>
</template>

<script>
import searchHistroy from "./components/searchHistroy.vue";
import searchSuggestion from "./components/searchSuggestion.vue";
import searchResult from "./components/searchResult.vue";
export default {
 components:{
    searchHistroy,
    searchSuggestion,
    searchResult
 },
 data() {
    return {
      searchText: '',
      isResultShow:false,//控制搜索结果的展示
    };
  },
  methods: {
    onSearch(val) {
      this.searchText = val
      this.isResultShow = true
    },
    onCancel() {
      this.$router.back()
    },
  },
}
</script>

<style>
.search-container{
    padding-top: 108px;
}
.van-search__action {
    color: white;
}
.search-form{
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
 }

</style>